<template>
  <div class="item">
    <loading :show="isLoading"></loading>
    <div class="title" :style="item.spStatus == 3 ? 'background-color: #db6b38;' : 'background-color: #a9dea5;'">
      <div class="tag" v-if="item.spStatus == 1 && item.status == 0" style="background-color: #a9dea5;">待审批</div>
      <div class="tag" v-if="item.spStatus == 2 && item.status == 0" style="background-color: #a9dea5;">已审批</div>
      <div class="tag" v-if="item.spStatus == 2 && item.status == 1" style="background-color: #a9dea5;">已接收</div>
      <div class="tag" v-if="item.spStatus == 2 && item.status == 2" style="background-color: #a9dea5;">已拒收</div>
      <div class="tag" v-if="item.spStatus == 3 && item.status == 0" style="background-color: #db6b38;">驳回</div>
      <div class="name">{{ item.createName || item.createBy }} <div class="describe">(转出人)</div></div>
      <Icon type="weui-icon weui_icon_download weui-icon-download" class="Icon"></Icon>
      <div class="name" :style=" item.spStatus == 1 ? 'opacity: 0.3;' : 'opacity: 1;'">{{ item.spStatus == 1 ? $store.state.user.approver.userName : item.approveUserName }}<div class="describe">(审批人)</div></div>
      <Icon type="weui-icon weui_icon_download weui-icon-download" class="Icon"></Icon>
      <div class="name" :style=" item.status == 0 ? 'opacity: 0.3;' : 'opacity: 1;'">{{ item.userName || item.userId}}
        <div class="describe">(接收人)</div>
      </div>
    </div>
    <div class="content">
      <div class="label">
        <span class="label_title">转移时间</span>
        <span class="name">{{ item.createTime }}</span>
      </div>
      <div class="label">
        <span class="label_title">转移数量</span>
        <span class="name">{{ item.assetIds.split(",").length }}件物品</span>
      </div>
      <div class="label">
        <span class="label_title">转移单号</span>
        <span class="name">{{ item.id || "无"}}</span>
      </div>
      <div class="btn_label">
        <x-button class="Detail-btn"  @click.native="DetailBtn(item)">详情</x-button>
        <x-button class="confirm-btn" v-if="item.status == 0 && item.spStatus == 1  && $store.state.user.userInfo.wxUserId == $store.state.user.approver.userId" @click.native="returnBtn(2)">审批</x-button>
        <x-button class="confirm-btn" v-if="item.status == 0 && item.spStatus == 1  && $store.state.user.userInfo.wxUserId == $store.state.user.approver.userId" @click.native="returnBtn(3)" style="background-color: #db6b38; border: 1px solid #db6b38;">驳回</x-button>
        <x-button class="confirm-btn" v-if="item.status == 0 && item.spStatus == 2  && item.userId == $store.state.user.userInfo.wxUserId" @click.native="confirmReceive(1)">接收</x-button>
        <x-button class="confirm-btn" v-if="item.status == 0 && item.spStatus == 2  && item.userId == $store.state.user.userInfo.wxUserId" @click.native="confirmReceive(2)">拒收</x-button>
      </div>
    </div>
  </div>
</template>

<script>
import { XButton, Icon, Loading  } from "vux";
import AssetApi from "@/api/asset.js";
export default {
  components: {
    XButton,
    Icon,
    Loading,
  },
  data() {
    return {
      isLoading:false
    };
  },
  props:{
    item:{
      type:Object,
      default:()=>{}
    },
    // 操作按钮是否显示
    receiveBtn:{
      type:Boolean,
      default:()=>false
    },
    // 审批按钮是否显示
    approverBtn:{
      type:Boolean,
      default:()=>false
    },
  },
  mounted() {
    console.log(this.receiveBtn,this.approverBtn);
  },
  methods: {
    // 资产审批 ：通过/驳回 2:通过 ，3：驳回
    returnBtn(index){
      let _this = this
      _this.$vux.confirm.show({
        title:  "审批",
        content: index==2?"同意转移申请":"驳回转移申请",
        onConfirm() {
          _this.isLoading = true
          let params = {
            id  : _this.item.id,
            spKap   : index
          }
          AssetApi.approver(params).then((res) => {
            _this.isLoading = false
            if (res.code == "0000") {
              _this.$vux.toast.show({
                text: index==2 ? "审批成功" : '驳回成功',
              });
              _this.$emit("getList")
            }else{
              this.$vux.toast.show({
                text: res.message,
                type: "warn",
              });
            }
          });
        },
      });
    },
    // 资产 ：接收/拒收 1:确认 ，2：拒绝
    confirmReceive(index) {
      let _this = this
      _this.$vux.confirm.show({
        title: index==1 ? "接收" : "拒收",
        content: index==1 ? "确认接收后不可更改" : "确认拒收后不可更改",
        onConfirm() {
          _this.isLoading = true
          let params = {
            id  : _this.item.id,
            kap : index
          }
          AssetApi.transferConfirm(params).then((res) => {
            _this.isLoading = false
            if (res.code == "0000") {
              _this.$vux.toast.show({
                text: index==1 ? "资产接收成功" : "资产拒收成功",
              });
              _this.$emit("getList")
            }else{
              this.$vux.toast.show({
                text: res.message,
                type: "warn",
              });
            }
          });
        },
      });
    },
    // 订单详情
    DetailBtn(){
      let query={
        id: this.item.id,
      }
      this.$router.push({ name: 'transferDetail', query });
    },
  },
}
</script>

<style lang="less" scoped>
  .item {
    width: 100%;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 10px;
    height: 232px;
    position: relative;
    .title {
        position: relative;
        box-sizing: border-box;
        display: inline-block;
        height: 88px;
        width: 100%;
        padding: 0 10px;
        background-color: #e7d9bf;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .tag{
          border-top-left-radius: 15px;
          border-bottom-left-radius: 15px;
          position: absolute;
          top: 100px;
          right: 0;
          width: 70px;
          height: 30px;
          background-color: #e7d9bf;
          font-size: 14px;
          line-height: 30px;
          display: flex;
          justify-content: center;
        }
        .name{
          margin-top: -10px;
          position: relative;
          width: 75px;
          height: 35px;
          border-radius: 8px;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          .describe{
            position: absolute;
            font-size: 12px;
            left: 17px;
            bottom: -20px;
          }
        }
        .Icon {
          font-size: 26px;
          color: rgb(255, 255, 255);
          background-color: rgba(0, 0, 0, 0);
          transform: rotate(270deg)
        }
      }
      .content{
        box-sizing: border-box;
        width: 100%;
        height: 144px;
        padding: 10px 15px;
        .label{
          width: 100%;
          display: flex;
          justify-content: flex-start;
          height: 30px;
          line-height: 30px;
          color: rgb(127, 127, 127);
          .label_title{
            width: 100px;
            display: inline-block;
          }
          .name{
            width: 100%;
            white-space: nowrap; /* 让文本在一行中显示 */
            overflow: hidden; /* 当文本溢出时隐藏超出部分 */
            text-overflow: ellipsis; /* 显示省略号以表示被隐藏的文本 */
          }
        }
        .btn_label{
          width: 100%;
          display: flex;
          justify-content: center;
          height: 32px;
          line-height: 30px;
          padding: 2px 0;
          .Detail-btn{
            border-radius: 15px;
            margin: 0 20px;
            padding: 0;
            width: 85px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            background-color: #fff;
            border: 1px solid #9d9b9b;
          }
          .confirm-btn{
            border-radius: 15px;
            margin: 0 20px;
            padding: 0;
            width: 85px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #fff;
            background-color: rgb(14, 96, 231);
            border: 1px solid rgb(14, 96, 231);
          }
        }
      }
  }
</style>